import ChartBase from "./chart-base";
import { deepClone, mergeObject } from "@/utils";

export default class MapLines extends ChartBase {
  constructor() {
    super();
  }

  //基础描述
  _info = {
    name: "攻击地图",
    type: "map-lines",
    group: "map", // 图表分类
    component: "Map",
    icon: "map-lines", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    tooltip: {
      show: true,
      trigger: "item",
      formatter: (p) => {
        return p.name;
      },
    },

    geo: {
      // 这个是重点配置区
      map: "china",
      aspectScale: 0.75, //长宽比
      zoom: 1.1,
      roam: false,
      itemStyle: {
        areaColor: "#274d68",
        shadowColor: "#3A73C0",
        shadowOffsetX: 2,
        shadowOffsetY: 11,
        emphasis: {
          areaColor: "#2AB8FF",
          borderWidth: 0,
          color: "green",
          label: {
            show: false,
          },
        },
      },
      regions: [
        {
          name: "南海诸岛",
          opacity: 0,
          itemStyle: {
            areaColor: "rgba(0, 10, 52, 1)",
            borderColor: "rgba(0, 10, 52, 1)",
            opacity: 0,
            label: {
              show: false,
              color: "#009cc9",
            },
          },
        },
      ],
    },
    series: [],
  };

  // 系列
  _defaultSeries = {};

  _defaultMapSeries = {
    type: "map",
    zoom: 1.1,
    map: "china",
    roam: false,
    selectedMode: false, //取消点击后出现黄色高亮
    label: {
      show: true,
      textStyle: {
        color: "#000000",
      },
      emphasis: {
        textStyle: {
          color: "#000000",
        },
      },
      fontSize: 12,
    },

    itemStyle: {
      borderColor: "#93EBF8",
      borderWidth: 1,
      areaColor: "#274d68",
      emphasis: {
        areaColor: "#2EE5CE",
        borderWidth: 0.1,
      },
    },
  };

  _linesDefaultSeries = {
    type: "lines",
    zlevel: 2,
    effect: {
      show: true,
      period: 6, //箭头指向速度，值越小速度越快
      symbol: "arrow", //箭头图标
      trailLength: 0.6, //特效尾迹长度[0,1]值越大，尾迹越长重
      symbolSize: 7, //图标大小
    },
    lineStyle: {
      color: "#1DE9B6",
      width: 1, //线条宽度
      opacity: 0.1, //尾迹线条透明度
      curveness: 0.3, //尾迹线条曲直度
    },
    data: [],
  };

  _scatterDefaultSeries = {
    type: "effectScatter",
    tooltip: {
      show: true,
      trigger: "item",
    },
    coordinateSystem: "geo",
    showEffectOn: "render",
    rippleEffect: {
      brushType: "stroke",
    },
    hoverAnimation: true,
    itemStyle: {
      normal: {
        color: "#1DE9B6",
        shadowBlur: 10,
        shadowColor: "#1DE9B6",
      },
    },
    label: {
      position: "right",
      show: true,
    },
    zlevel: 3,
    data: [],
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "起始地区",
      key: "startAreaName",
      type: ["string"],
      limit: 1,
      description: "字段类型为「 字符类型 」",
      width: "50%",
    },
    {
      label: "结束地区",
      key: "endAreaName",
      type: ["string"],
      limit: 1,
      description: "字段类型为「 字符类型 」",
      width: "50%",
    },
    {
      label: "起始经度",
      key: "startLong",
      type: ["number", "string"],
      limit: 1,
      description: "字段类型为「 数字类型 」或「 字符类型 」",
      width: "50%",
    },
    {
      label: "起始纬度",
      key: "startLat",
      type: ["number", "string"],
      limit: 1,
      description: "字段类型为「 数字类型 」或「 字符类型 」",
      width: "50%",
    },
    {
      label: "结束经度",
      key: "endLong",
      type: ["number", "string"],
      limit: 1,
      description: "字段类型为「 数字类型 」或「 字符类型 」",
      width: "50%",
    },
    {
      label: "结束纬度",
      key: "endLat",
      type: ["number", "string"],
      limit: 1,
      description: "字段类型为「 数字类型 」或「 字符类型 」",
      width: "50%",
    },
    // {
    //   label: '详细信息',
    //   key: 'info',
    //   type: ['string', 'date', 'number'],
    //   limit: 5,
    //   description: '飞线代表的相关数据,支持多个字段,「 类型不限 」',
    // }
  ];

  // 样式配置描述信息
  _styleOptionConfig = [
    {
      label: "地图配置",
      bindKeys: "_group.map",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "区域展示",
      bindKeys: "mapSeries.label.show",
      controlType: "switch",
      controlValue: false,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "区域字体颜色",
      bindKeys: "mapSeries.label.textStyle.color",
      controlType: "color-picker",
      controlValue: "#000000",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "地图颜色",
      bindKeys: "mapSeries.itemStyle.areaColor",
      controlType: "color-picker",
      controlValue: "#3FA3EB",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分割线颜色",
      bindKeys: "mapSeries.itemStyle.borderColor",
      controlType: "color-picker",
      controlValue: "#93EBF8",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "高亮颜色",
      bindKeys: "mapSeries.itemStyle.emphasis.areaColor",
      controlType: "color-picker",
      controlValue: "#EFCA41",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "高亮字体颜色",
      bindKeys: "mapSeries.label.emphasis.textStyle.color",
      controlType: "color-picker",
      controlValue: "#000000",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "阴影颜色",
      bindKeys: "option.geo.itemStyle.shadowColor",
      controlType: "color-picker",
      controlValue: "#BDD3EF",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "路径配置",
      bindKeys: "_group.lines",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标记图形",
      bindKeys: "linesSeries.effect.symbol",
      controlType: "select",
      controlValue: "arrow",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "箭头",
            value: "arrow",
          },
          {
            label: "空心圆",
            value: "emptyCircle",
          },
          {
            label: "圆",
            value: "circle",
          },
          {
            label: "矩形",
            value: "rect",
          },
          {
            label: "圆角矩形",
            value: "roundRect",
          },
          {
            label: "三角形",
            value: "triangle",
          },
          {
            label: "钻石",
            value: "diamond",
          },
        ],
      },
    },
    {
      label: "线条颜色",
      bindKeys: "linesSeries.lineStyle.color",
      controlType: "color-picker",
      controlValue: "#1DE9B6",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "线条宽度",
      bindKeys: "linesSeries.lineStyle.width",
      controlType: "slider",
      controlValue: 1,
      controlProps: {
        min: 1, // 最小值
        max: 5, // 最大值
        step: 1, // 步长
      },
      controlConfigs: {},
    },
    {
      label: "线条曲线",
      bindKeys: "linesSeries.lineStyle.curveness",
      controlType: "slider",
      controlValue: 0.3,
      controlProps: {
        min: 0, // 最小值
        max: 1, // 最大值
        step: 0.1, // 步长
      },
      controlConfigs: {},
    },
    {
      label: "散点配置",
      bindKeys: "_group.scatter",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "散点大小",
      bindKeys: "scatterSeries.scatterStyle.size",
      controlType: "slider",
      controlValue: 7,
      controlProps: {
        min: 1, // 最小值
        max: 10, // 最大值
        step: 1, // 步长
      },
      controlConfigs: {},
    },
    {
      label: "散点名称展示",
      bindKeys: "scatterSeries.label.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "提示框配置",
      bindKeys: "_group.tooltipConfig",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "提示框展示",
      bindKeys: "option.tooltip.show",
      controlType: "switch",
      controlValue: false,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "字体大小",
      bindKeys: "option.tooltip.textStyle.fontSize",
      controlType: "slider",
      controlValue: 14,
      controlProps: {
        min: 12, // 最小值
        max: 18, // 最大值
        step: 1, // 步长
      },
      controlConfigs: {},
    },
    {
      label: "字体颜色",
      bindKeys: "option.tooltip.textStyle.color",
      controlType: "color-picker",
      controlValue: "#606266",
      controlProps: {},
      controlConfigs: {},
    },
  ];

  getOption({
    dataList = [],
    dataTotal = 0,
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
    themeStyle = {},
  }) {
    // XXX themeStyle
    let { option, mapSeries, linesSeries, tooltipConfig, scatterSeries } =
      this._transformStyleOptionConfig(styleOptionConfig);

    let defaultOption = deepClone(this._defaultOption);
    let mapDefaultSeries = deepClone(this._defaultMapSeries);
    let linesDefaultSeries = deepClone(this._linesDefaultSeries);
    let scatterDefaultSeries = deepClone(this._scatterDefaultSeries);

    // 再合并自定义配置项
    if (defaultOption && option)
      defaultOption = mergeObject(defaultOption, option);
    if (mapDefaultSeries && mapSeries)
      mapDefaultSeries = mergeObject(mapDefaultSeries, mapSeries);
    if (linesDefaultSeries && linesSeries)
      linesDefaultSeries = mergeObject(linesDefaultSeries, linesSeries);
    if (scatterDefaultSeries && scatterSeries)
      scatterDefaultSeries = mergeObject(scatterDefaultSeries, scatterSeries);

    defaultOption.color = themeColor;

    defaultOption.series.push({
      ...mapDefaultSeries,
    });

    // 定义路径飞线
    if (this._info.component === "Map") {
      if (
        dataPoolField.startLong.length &&
        dataPoolField.startLat.length &&
        dataPoolField.endLong.length &&
        dataPoolField.endLat.length
      ) {
        let startAreaName = dataPoolField.startAreaName[0].fieldName,
          endAreaName = dataPoolField.endAreaName[0].fieldName,
          startLongField = dataPoolField.startLong[0].fieldName,
          startLatField = dataPoolField.startLat[0].fieldName,
          endLongField = dataPoolField.endLong[0].fieldName,
          endLatField = dataPoolField.endLat[0].fieldName;

        linesDefaultSeries.data = dataList.reduce((r, c) => {
          r.push({
            coords: [
              [parseFloat(c[startLongField]), parseFloat(c[startLatField])],
              [parseFloat(c[endLongField]), parseFloat(c[endLatField])],
            ],
          });
          return r;
        }, []);

        scatterDefaultSeries.data = dataList.reduce((r, c) => {
          let startCoord = [
              parseFloat(c[startLongField]),
              parseFloat(c[startLatField]),
            ],
            endCoord = [
              parseFloat(c[endLongField]),
              parseFloat(c[endLatField]),
            ];
          if (
            !r.find(
              (item) =>
                JSON.stringify(item.value) === JSON.stringify(startCoord)
            )
          ) {
            r.push({
              value: startCoord,
              areaName: c[startAreaName],
            });
          }
          if (
            !r.find(
              (item) => JSON.stringify(item.value) === JSON.stringify(endCoord)
            )
          ) {
            r.push({
              value: endCoord,
              areaName: c[endAreaName],
            });
          }
          return r;
        }, []);

        //设置散点大小
        scatterDefaultSeries.symbolSize = (item) => {
          return scatterSeries.scatterStyle.size;
        };

        // 定义提示框样式
        scatterDefaultSeries.tooltip.formatter = (p) => {
          return `${p.data.areaName}`;
        };

        //散点名称
        scatterDefaultSeries.label.formatter = (p) => {
          return `${p.data.areaName}`;
        };

        defaultOption.series.push({
          ...scatterDefaultSeries,
        });
        defaultOption.series.push({
          ...linesDefaultSeries,
        });
      }
    }

    return {
      mapOption: defaultOption,
    };
  }

  getClickData(event) {
    const { name, seriesType, value } = event;
    if (seriesType === "map") {
      return {
        label: name,
        value: name,
      };
    }
  }
}
